<template>
  <div class="conference-room">
    <div class="card">
      <el-form inline>
        <el-form-item label="会议室名称：">
          <el-input v-model="params.name" placeholder="请输入会议室名称" />
        </el-form-item>

        <el-form-item>
          <el-button type="danger" @click="resetSearch">重置</el-button>
          <el-button type="primary" @click="handleSearch">查询</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-card shadow="never">
      <div style="margin-bottom: 20px;">
        <el-button type="primary" @click="addRoom">添加会议室</el-button>
        <el-button icon="el-icon-refresh-right" @click="resetSearch">刷新</el-button>
      </div>
      <el-table
        v-loading="loading"
        :data="list"
        border
        stripe
      >
        <el-table-column prop="id" label="ID" align="center" />
        <el-table-column prop="name" label="会议室名称" align="center" />
        <el-table-column prop="address" label="会议室位置" align="center" />
        <el-table-column prop="quantity" label="容纳数量" align="center" />
        <el-table-column prop="notes" label="备注" align="center" />
        <el-table-column prop="state" label="是否可用" align="center">
          <template v-slot="{ row }">
            <el-tag v-if="row.state" type="success">可用</el-tag>
            <el-tag v-else type="danger">不可用</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="280">
          <template v-slot="{ row }">
            <el-button size="mini" type="primary" @click="editRoom(row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="removeRoom(row)">删除</el-button>
            <el-button size="mini" @click="handleViewAppointment(row)">
              预约情况
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <Pagination
          v-if="total"
          style="margin-top: 0; padding-bottom: 0;"
          :total="total"
          :limit="params.paginate"
          :page="params.page"
          @pagination="pagination"
        />
      </div>
    </el-card>

    <CreateConferenceRoomDialog
      v-model="dialogVisible"
      @onConfirm="handleConfirm"
    />
    <EditConferenceRoomDialog
      v-model="editDialogVisible"
      :room-info="currentRoom"
      @onConfirm="handleEditConfirm"
    />
  </div>
</template>

<script>
import Pagination from '@/components/Pagination/index.vue'
import { sleep } from '@/utils'
import CreateConferenceRoomDialog from './components/createConferenceRoom/CreateConferenceRoomDialog.vue'
import EditConferenceRoomDialog from './components/createConferenceRoom/EditConferenceRoomDialog.vue'
import { createConferenceRoom, getConferenceRoomList, editConferenceRoom, deleteConferenceRoom } from '@/api/conferenceRoom'

export default {
  name: 'ConferenceRoom',
  components: {
    Pagination,
    CreateConferenceRoomDialog,
    EditConferenceRoomDialog
  },
  data() {
    return {
      loading: false,
      list: [],
      total: 0,
      dialogVisible: false,
      editDialogVisible: false,
      currentRoom: null,
      params: {
        paginate: 10,
        page: 1,
        name: null
        // quantity: null
        // state: null
      },
      stateOptions: [
        { value: 0, label: '不可用' },
        { value: 1, label: '可用' }
      ]
    }
  },
  created() {
    this.getRoomList()
  },
  methods: {
    pagination(e) {
      this.params.page = e.page
      this.params.paginate = e.limit
      this.refresh()
    },

    async getRoomList() {
      this.loading = true
      try {
        const res = await getConferenceRoomList(this.params)
        this.list = res.data.data
        this.total = res.data.total
      } catch (error) {
        this.$message.error(error?.response?.data?.message || '信息获取失败')
      } finally {
        await sleep(300)
        this.loading = false
      }
    },

    async handleConfirm(data) {
      try {
        await createConferenceRoom(data)
        this.$message.success('创建会议室成功')
        this.refresh()
      } catch (error) {
        this.$message.error(error?.response?.data?.message || '创建会议室失败')
      }
    },

    addRoom() {
      this.dialogVisible = true
    },

    editRoom(row) {
      this.currentRoom = { ...row }
      this.editDialogVisible = true
    },

    async handleEditConfirm(data) {
      try {
        await editConferenceRoom(data)
        this.$message.success('修改会议室成功')
        this.refresh()
      } catch (error) {
        this.$message.error(error?.response?.data?.message || '修改会议室失败')
      }
    },

    removeRoom(row) {
      this.$confirm(
        '是否删除该会议室？',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(async() => {
        try {
          await deleteConferenceRoom(row.id)
          this.$message.success('删除会议室成功')
          this.refresh()
        } catch (error) {
          this.$message.error(error?.response?.data?.message || '删除会议室失败')
        }
      })
    },

    handleSearch() {
      this.params.page = 1
      this.refresh()
    },

    resetSearch() {
      this.params = this.$options.data().params
      this.refresh()
    },

    refresh() {
      this.getRoomList()
    },

    handleViewAppointment(row) {
      this.$router.push({
        name: 'weeklyView',
        query: {
          id: row.id,
          name: row.name
        }
      })
    }
  }
}
</script>

<style scoped lang='scss'>
.conference-room {
  padding: 20px;

  .card {
    border-radius: 4px;
    background-color: #fff;
    margin-bottom: 20px;
    padding: 20px 20px 0 20px;
  }

  ::v-deep(.el-form-item) {
    margin-bottom: 20px;
  }

  .pagination {
    display: flex;
    justify-content: end;
  }
}

::v-deep(.el-card) {
  border: none;
}
</style>
